<script lang="ts" setup>
import { withBase } from "vitepress";
import { computed } from "vue";
import { CodeListMap, FuncFormItem, FuncFormPage, FuncGroupPanel } from "../interface/func-view-form";
import { getGridCol } from "../utils/getGridCol";

const props = defineProps<{
  data: FuncFormItem
  pData: FuncFormPage | FuncGroupPanel
  codeListMap: CodeListMap
}>()

const width = computed(() => {
  return getGridCol(props.data.getPSLayoutPos, props.pData.getPSLayout)
})

const codeList = computed(() => {
  const path = props.data.getPSEditor.getPSAppCodeList?.path
  if (path && props.codeListMap[path]) {
    return props.codeListMap[path].getPSCodeItems
  }
  return
})

const srcImg = computed(() => {
  if (!props.data.userTag) {
    return withBase('/svg/disable.svg')
  } else if (props.data.userTag === '1') {
    return withBase('/svg/enable.svg')
  }
  return ''
})
</script>

<template>
  <div class="func-form-item">
    <div :class="['form-item-caption', codeList ? 'code-list' : '']" :style="{ width: `${props.data.labelWidth}px` }">
      {{ props.data.caption }}
    </div>
    <div class="form-item-content">
      <div v-if="codeList" class="form-item-code-list">
        <template v-for="(code, i) in codeList" :key="i">
          <FormCheckBox :data="code" />
        </template>
      </div>
      <div v-else-if="srcImg" class="form-item-icon">
        <img :src="srcImg" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.func-form-item {
  display: flex;
  align-items: center;
  width: v-bind('width');
  padding: 3px 0;
  font-size: 14px;
  flex: 0 0 auto;
}

.form-item-caption {
  margin-right: 6px;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  flex: 0 0 auto;
}

.form-item-caption.code-list {
  align-self: flex-start;
  margin-top: 6px;
}

.form-item-code-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.form-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}

.form-item-icon img {
  max-width: 30px;
}
</style>